<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>文件传输系统 KIFT</span>
        <el-button style="float: right; padding: 3px" type="text">注销 <i class="el-icon-switch-button"></i></el-button>
        <el-button style="float: right; padding: 3px" type="text">刷新 <i class="el-icon-refresh-right"></i></el-button>
      </div>
      <div class="align_text">文件同步时间：2019年09月03日 13:32</div>
      <div class="align_text">OS：Linux</div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="file_name" label="文件名" width="180"></el-table-column>
        <el-table-column prop="create_date" label="创建日期" width="180"></el-table-column>
        <el-table-column prop="size" label="大小"></el-table-column>
        <el-table-column prop="create_user" label="创建者"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small"><i class="el-icon-download"></i> 下载</el-button>
            <el-button type="text" size="small"><i class="el-icon-picture-outline"></i> 查看</el-button>
            <el-button type="text" size="small"><i class="el-icon-close"></i> 删除</el-button>
            <el-button type="text" size="small"><i class="el-icon-paperclip"></i> 重命名</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "file",
    data: () => ({
      tableData: [{
        file_name: '1.jpg',
        create_date: '2019-05-02',
        size: '<1M',
        create_user:'王小虎'
      }, {
        file_name: '1.jpg',
        create_date: '2019-05-02',
        size: '<1M',
        create_user:'王小虎'
      }, {
        file_name: '1.jpg',
        create_date: '2019-05-02',
        size: '<1M',
        create_user:'王小虎'
      },{
        file_name: '1.jpg',
        create_date: '2019-05-02',
        size: '<1M',
        create_user:'王小虎'
      }]
    })
  }
</script>

<style scoped>
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .clearfix span{
    font-weight: bold;
    font-size: 20px;
  }
  .box-card {
    width: 80%;
    margin: 0 auto;
  }
  .align_text{
    text-align: center;
    font-size: 14px;
    color: #5cacee;
    margin-bottom: 10px;
  }
</style>
